<template>
  <chart-card :title="'里程排名'" :extraType="'drop'" @changeDate="changeDate">
    <a-row type="flex" justify="space-between">
      <Charts
        :chartData="mileData"
        :chartType="'mileRank'"
        class="echartsMap"
      />
    </a-row>
  </chart-card>
</template>

<script>
import Charts from "../charts/Charts";
import { ChartCard } from "./components";
import { getMileRank } from "@/services/home";
export default {
  name: "MileRank",
  data() {
    return {
      mileData: {
        list: [
          {
            value: 681807,
            label: "京A37782"
          },
          {
            value: 661807,
            label: "京A37782"
          },
          {
            value: 611807,
            label: "京A37782"
          },
          {
            value: 581807,
            label: "京A37782"
          },
          {
            value: 481807,
            label: "京A37782"
          },
          {
            value: 368187,
            label: "京A37782"
          },
          {
            value: 281807,
            label: "京A37782"
          },
          {
            value: 221807,
            label: "京A37782"
          },
          {
            value: 181807,
            label: "京A37782"
          },
          {
            value: 111807,
            label: "京A37782"
          }
        ]
      }
    };
  },
  mounted() {
    // this.getMileRank();
  },
  components: {
    Charts,
    ChartCard
  },
  props: {
    title: String,
    loading: Boolean,
    type: String
  },
  methods: {
    changeDate(val) {
      console.log(val);
    },
    async getMileRank() {
      const {
        data: { data, code }
      } = await getMileRank();
      if (code === 200) {
        this.mileData = data;
      }
    }
  }
};
</script>

<style scoped lang="less">
.echartsMap {
  width: 100%;
  height: 320px;
}
</style>
